<template>
  <div class="">
    <div class="q-ma-md" style="">
      <t-button color="primary" @click="onReload"
        >Reload</t-button
      >
    </div>

    <!-- Grid表格 -->
    <t-repeat
      ref="repeatRef"
      v-model:list="rows"
      :page-size="10"
      :paging-type="`pagination`"
      :fill-mode="`fill`"
      fill-margin-bottom="48"
      :empty-text="`暂无数据`"
      :auto-load="true"
      class="t-repeat"
      @page-load="onPagelLoad"
    >
      <template v-slot:item="{ row }">
        <div class="q-pa-sm full-width" style="">
          <q-card :key="row.id" class="q-pa-sm" style="">
            <t-label>{{ row.name }}</t-label>
            <q-separator />
            <div>
              <t-label>calories</t-label>
              {{ row.calories }}
            </div>
            <div>
              <t-label>fat</t-label>
              {{ row.fat }}
            </div>
          </q-card>
        </div>
      </template>
    </t-repeat>
  </div>
</template>

<script>
import { onMounted, ref } from 'vue';
import originalRows from './tableData.js';

export default {
  setup() {
    const rows = ref([]);
    const repeatRef = ref();

    // emulate ajax call
    // SELECT * FROM ... WHERE...LIMIT...
    function fetchFromServer(startRow, count, filter, sortBy, descending) {
      const data = filter
        ? originalRows.filter(row => row.name.includes(filter))
        : originalRows.slice();

      // handle sortBy
      if (sortBy) {
        const sortFn =
          sortBy === 'desc'
            ? descending
              ? (a, b) => (a.name > b.name ? -1 : a.name < b.name ? 1 : 0)
              : (a, b) => (a.name > b.name ? 1 : a.name < b.name ? -1 : 0)
            : descending
              ? (a, b) => parseFloat(b[sortBy]) - parseFloat(a[sortBy])
              : (a, b) => parseFloat(a[sortBy]) - parseFloat(b[sortBy]);
        data.sort(sortFn);
      }

      return new Promise(resolve => {
        setTimeout(() => {
          const retData = data.slice(startRow, startRow + count);
          resolve(retData);
        }, 500);
      });
    }

    // emulate 'SELECT count(*) FROM ...WHERE...'
    function getRowsNumberCount(filter) {
      if (!filter) {
        return originalRows.length;
      }
      let count = 0;
      originalRows.forEach(treat => {
        if (treat.name.includes(filter)) {
          ++count;
        }
      });
      return count;
    }

    async function onPagelLoad({ pagination, done }) {
      debugger
      const { page, rowsPerPage, sortBy, descending } = pagination;

      // emulate server
      // update rowsCount with appropriate value
      const rowsCount = getRowsNumberCount();
      // get all rows if "All" (0) is selected
      const fetchCount =
        rowsPerPage === 0 ? pagination.value.rowsNumber : rowsPerPage;
      // calculate starting row of data
      const startRow = (page - 1) * rowsPerPage;
      // fetch data from "server"
      const returnedData = await fetchFromServer(startRow, fetchCount);

      // clear out existing data and add new
      rows.value.splice(0, rows.value.length, ...returnedData);
      // rows.value = [...returnedData];
      // rows.value.splice(0, rows.value.length);

      done({ totalCount: rowsCount });
      // done({ totalCount: 0 });
    }

    function onReload() {
      repeatRef.value.reload();
    }

    onMounted(() => {});

    return {
      rows,
      repeatRef,
      onPagelLoad,
      onReload,
    };
  },
};
</script>
